@use "variables" as vars;

menu {
  background-color: vars.$bg;
  color: vars.$primary;

  * {
    color: vars.$fg;
  }
}

button,
menubutton {
  // all: unset;
  background-color: vars.$buttonBg;
  color: vars.$buttonFg;
  padding: 0px 8px 0px 8px;
  border: none;
  border-radius: 4px;
  margin: 0;

  label {
    margin: 0;
  }

  box {
    margin: 0;
  }

  &:hover {
    background-color: vars.$buttonBgHover;
    color: vars.$buttonFgHover;
  }

  &.icon {
    border-radius: 100%;
    min-width: 1.5rem;
    min-height: 1.5rem;
    padding: 0;
  }

  &.primary {
    background-color: vars.$buttonPrimaryBg;
    color: vars.$buttonPrimaryFg;

    &:hover {
      color: vars.$buttonPrimaryFgHover;
      background-color: vars.$buttonPrimaryBgHover;
    }
  }

  &.accent {
    background-color: vars.$buttonAccentBg;
    color: vars.$buttonAccentFg;

    &:hover {
      color: vars.$buttonAccentFgHover;
      background-color: vars.$buttonAccentBgHover;
    }
  }
}

.divider {
  border: 1px solid vars.$bgHover;
  margin: 1rem 0;
}

box > .icon {
  margin: 0 0.7rem;
}

button > box {
  & > .icon,
  & box > .icon {
    &:first-child:not(:last-child) {
      margin-left: 0;
    }

    &:last-child:not(:first-child) {
      margin-right: 0;
    }
  }
}

.stack {
  .notification {
    margin-right: 10px;
  }
  &.not-empty {
    .notification {
      /* margin-right: 10px; */
      box-shadow:
        9px 9px 0px vars.$bgHover,
        8px 8px 0px vars.$bg,
        4px 4px 0px vars.$bgHover,
        3px 3px 0px vars.$bg;
    }
  }
}

label,
entry {
  all: unset;
  color: vars.$fg;

  &.icon {
    margin: 0 0.7rem;
  }

  &.medium {
    font-size: 1rem;
  }

  &.large {
    font-size: 1.2rem;
  }

  &.xlarge {
    font-size: 1.6rem;
  }

  &.xxlarge {
    font-size: 2rem;
  }

  &.xxxlarge {
    font-size: 3rem;
  }

  &.small {
    font-size: 0.8rem;
  }

  &.xsmall {
    font-size: 0.6rem;
  }
}

entry {
  padding: 1rem;
}

button box {
  .section {
    margin: 0 0.5rem;

    &:first-child {
      margin-left: 0;
    }

    &:last-child {
      margin-right: 0;
    }
  }
}

scrollable {
  .frame {
    border-style: none;
  }

  .trough {
    border-style: none;
  }
}

.window {
  background-color: vars.$bg;
  border-radius: vars.$borderRadius;
  border-color: vars.$borderColor;
  border-width: vars.$borderWidth;
  border-style: solid;
  font-size: vars.$baseFontSize;
  font-family: vars.$fontFamily;
  font-weight: vars.$fontWeight;
}

.calendar {
  border-color: transparent;
}

.slider {
  all: unset;

  trough {
    all: unset;
    background: vars.$sliderBack;
    min-height: 8px;
    border-radius: 16px;

    slider {
      all: unset;
    }

    highlight {
      all: unset;
      min-width: 8px;
      border-radius: 16px;
      background: vars.$sliderFront;
    }
  }
}

.notification {
  // eventboxes can not take margins so we style its inner box instead
  min-width: 300px;
  margin: 0.3rem 0;
  opacity: 1;
  transition: opacity 200ms ease-out;
  &.dismissed {
    opacity: 0;
  }

  .header {
    margin: 0.4rem 0;

    button {
      background-color: transparent;
    }
  }

  .image {
    border-radius: 0.5rem;
    min-width: 5rem;
    min-height: 5rem;
    margin-right: 1rem;
  }

  &.critical {
    border: 2px solid vars.$warning;

    .header {
      .appname {
        color: vars.$warning;
      }

      .appicon {
        color: vars.$warning;
      }
    }
  }
}

.osd {
  .inner {
    padding: vars.$osdPadding;
    min-width: vars.$osdWidth;
  }
}

.osdIconWithTextAndSlider {
  .title {
    margin-bottom: 0.5rem;
  }

  .iconWrapper {
    min-width: 4rem;
  }

  .icon {
    color: vars.$fg;
    margin-right: 1.5rem;
    font-size: 3rem;
  }
}

.overview {
  .left {
    // margin: 1rem;
  }
}

.popUp .inner {
  margin: 1rem;
  min-width: vars.$popupWidth;
}

.storagePopup {
  .unit {
    margin-bottom: 1rem;

    .description {
      opacity: 0.3;
    }
  }
}

.mediaPlayer {
  .seekContainer {
    label,
    slider {
      margin: 0 1rem;
    }
  }

  .slider {
    min-width: 10rem;
  }
}
