@use "./colors";

.logout-menu-container {
  background: rgba($color: colors.$bg-translucent-primary, $alpha: .4);

  .top {
    .time {
      font-size: 128px;
      font-weight: 900;
      color: colors.$fg-primary;
      text-shadow: 1px 1px 2px colors.$bg-translucent;
    }
    .date {
      font-size: 24px;
      font-weight: 500;
      text-shadow: 1px 1px 2px colors.$bg-translucent;
    }
  }
  .button-row {
    $radius: 32px;

    all: unset;
    margin: 0 150px;

    & > button {
      & image {
        -gtk-icon-size: 128px;
      }

      &:focus-visible {
        box-shadow: inset 0 0 0 5px colors.$fg-primary;
      }

      &:active {
        border-radius: calc($radius - 6px);
      }

      margin: 0 4px;
      border-radius: 6px;

      &:first-child:not(:active) {
        border-top-left-radius: $radius;
        border-bottom-left-radius: $radius;
      }

      &:last-child:not(:active) {
        border-top-right-radius: $radius;
        border-bottom-right-radius: $radius;
      }
    }
  }
}