@use "sass:color";

@use "./style/wal";
@use "./style/mixins";
@use "./style/colors";

@use "./style/bar";
@use "./style/osd";
@use "./style/control-center";
@use "./style/center-window";
@use "./style/float-notifications";
@use "./style/logout-menu";
@use "./style/apps-window";
@use "./style/runner";


* {
  @include mixins.reset-props;
}

window * {
  @include mixins.default-styles;
}

window.ask-popup {
  background: rgba(black, .4);
}

.ask-popup-box {
  background: colors.$bg-translucent;
  padding: 18px;
  border-radius: 24px;

  & .title {
    font-size: 20px;
    font-weight: 700;
  }

  & .buttons {
    margin-top: 20px;

    & button {
      background: colors.$bg-primary;
      border-radius: 12px;
      padding: 9px 6px;

      & label {
        font-size: 16px;
        font-weight: 600;
      }

      margin: {
        left: 4px;
        right: 4px;
      };

      &:hover {
        background: colors.$bg-secondary;
      }
    }
  }
}

.notification {
  background: colors.$bg-translucent-secondary;
  border-radius: 16px;

  & > .top {
    padding: 8px;
    padding-bottom: 0;

    & .app-icon {
      margin-right: 6px;
    }

    & .app-name {
      font-size: 12px;
    }


    & label.time {
      font-size: 11px;
      font-weight: 500;
      color: colors.$fg-disabled;
      margin-right: 6px;
    }

    & button.close {
      padding: 2px;
      border-radius: 8px;

      &:hover {
        background: colors.$bg-secondary;
      }
    }

    & icon.close {
      font-size: 16px;
    }
  }

  & .content {
    padding: 6px;
    padding-top: 0;

    & .image {
      $size: 78px;
      min-width: $size;
      min-height: $size;
      background-size: cover;
      background-position: center;
      margin: 6px;
      border-radius: 8px;
    }

    & .summary {
      font-size: 17.3px;
      font-weight: 700;
      margin-bottom: 4px;
    }

    & .body {
      font-size: 14.5px;
      font-weight: 400;
    }
  }

  & .actions {
    padding: 6px;

    & button.action {
      @include mixins.hover-shadow;

      border-radius: 4px;
      background: colors.$bg-secondary;
      padding: 6px;

      & label {
        font-size: 14px;
        font-weight: 600;
      }

      &:first-child {
        border-top-left-radius: 12px;
        border-bottom-left-radius: 12px;
      }
      &:last-child {
        border-top-right-radius: 12px;
        border-bottom-right-radius: 12px;
      }
    }
  }
}

tooltip {
  padding: 16px;

  & > box {
    padding: 7px 8px;
    border-radius: 10px;
    background: rgba(colors.$bg-primary, .98);
    font-size: 13.1px;
    font-weight: 500;
    color: colors.$fg-primary;
    box-shadow: 0 1px 4px 1px rgba(colors.$bg-primary, .6);
  }
}

menu {
  padding: 4px;
  background: wal.$background;
  border-radius: 14px;
                               
  & separator {
    margin: 0 4px;
    color: wal.$background;
  }
                               
  & menuitem {
    padding: 8px 16px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
                               
    &:hover {
      background: wal.$color1;
    }
  }
}

scrollbar trough {
  @include mixins.reset-props;

  background: colors.$bg-translucent;
  border-radius: 8px;

  & slider {
    @include mixins.reset-props;

    min-width: .45em;
    background: colors.$bg-tertiary;
    border-radius: 12px;

    &:hover, &:active, &:focus {
      margin: 0 2px;
    }
  }

  &:hover, &:active, &:focus {
    padding: 0 2px;
  }
}

slider, scale {
  & marks mark {
    & indicator {
      color: colors.$fg-disabled;
      min-width: 1px;
      min-height: 6px;
    }

    & label {
      font-size: 11px;
      font-weight: 400;
      color: colors.$fg-disabled;
    }
  }
}