@import "./base.scss";

$drop-shadow: 0 0 30px rgba(0, 0, 0, 0.4);
$avatar-size: 128px;
$date-fg-color: rgba(white, 0.5);
$blur-fade-ms: 300ms;
$blur-fade-ease: ease-out;
$blur-amount: 10px;

lockerwindow {
  background: transparent;

  .locker-wallpaper {
    transition: filter $blur-fade-ease $blur-fade-ms;
  }

  &.focused .locker-wallpaper {
    filter: blur($blur-amount);
  }

  label {
    text-shadow: $drop-shadow;
  }

  .locker-time-box {
    margin-top: 64px;

    .locker-time {
      font-size: 128px;
      font-weight: bold;
      color: $date-fg-color;
    }

    .locker-date {
      font-size: 32px;
      font-weight: bold;
      color: $date-fg-color;
    }
  }

  .locker-content {
    background: rgba(0, 0, 0, 0.2);

    .locker-avatar {
      filter: drop-shadow($drop-shadow);
      margin: 6px;
      -gtk-icon-size: $avatar-size;
    }

    .locker-name {
      font-size: 18px;
      margin: 6px;
    }

    & > box {
      margin-top: 32px;

      .locker-entry {
        box-shadow: $drop-shadow;
        margin: 4px;
        border-radius: 100px;

        & text {
          margin: 0 4px;
        }
      }

      .locker-unlock {
        box-shadow: $drop-shadow;
        margin: 4px;
      }
    }

    .locker-status {
      margin: 4px 0;

      &.error banner widget {
        color: var(--error_fg_color);
      }

      banner widget {
        background: transparent;
        color: var(--window_fg_color);
        padding: 0 32px;
        margin: 4px;
        border-radius: 100px;
      }
    }
  }
}
