padraigfl/packard-belle

@import 'src/_scss/w98/var/colors';
@import 'src/_scss/w98/functions/box-shadows';
@import 'src/_scss/w98/var/var';
@import 'src/_scss/w98/var/uris';
@import 'src/_scss/w98/_menu';

@mixin window-basic {
  position: relative;
  background-color: $grey;
  padding: 3px;
  box-shadow: dualShadow($grey, $black), dualShadow(white, $darkgrey, 2);
}

@mixin window-heading {
  display: flex;
  background: linear-gradient(to right, $blue, #126fc2);
  font-weight: bold;
  color: white;
  margin-bottom: 1px;
  padding: 0px 3px;
  align-items: center;
  letter-spacing: 1px;

  button {
    padding: 0px;
    min-width: initial;
    width: 16px;
    height: 14px;
    margin-left: 1px;
    image-rendering: pixelated;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-position: 1px 1px;

    &:focus, &.clicked {
      outline: none;
      border: none;
    }

    &:active:focus, &.clicked {
      padding: 2px 8px 1px 4px;
      background-position: 2px 2px;
    }
  }
}

@mixin window-icon {
  padding: 8px;
  display: flex;
  background-size: 14px;
  background-repeat: no-repeat;
  background-position: center;
}

@mixin window-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-grow: 1;
  min-width: 0px;
}

@mixin window-menu($classname: 'div') {
  display: flex;
  padding: 0px;
  font-size: 1rem;
  position: relative;
  overflow-y: visible;
  z-index: 20;

  >div{
    position: relative;

    >button {
      padding: 0px 4px;
      outline: none;
      border: none;
      user-select: none;
      color: $black;
      display: inline-block;
      background-color: rgba(0,0,0,0);
      width: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      text-align: left;
      padding: 3px 6px;

      +div, +#{$classname} {
        z-index: 20;
        visibility: hidden;
        position: absolute;
        max-height: 0px;
        top: 100%;
        left: 0px;
        transition: max-height linear 750ms;
      }

      &:hover {
        box-shadow: dualShadow(white, $darkgrey);
      }

      &:active, &:focus, &:active:focus, &.active, &.clicked {
        box-shadow: dualShadow($darkgrey, white);
        padding: 4px 5px 2px 7px;

        + div, +#{$classname} {
          visibility: visible;
          max-height: 480px;
        }
      }
    }
  }
}

@mixin window-settings-section() {
  position: relative;
  border: 1px solid white;
  outline: 1px solid darkgrey;
  padding: 5px;
  margin: 16px 8px 8px;

  .title {
    position: absolute;
    top: -10px;
    padding: 2px 4px;
    background-color: $grey;
  }
}

@mixin window-alert() {
  max-width: 320px;
  &__message {
    display: flex;
    align-items: center;
    &.has-icon {
      background-size: 28px 28px;
      background-repeat: no-repeat;
      background-position: 6px 6px;
      padding: 6px 2px 6px 44px;
    }
    min-height: 28px;
    padding: 10px 2px 6px;
  }
  &__actions {
    width: 100%;
    display: flex;
    justify-content: center;
    .btn--form {
      margin: 0px 4px 8px;
    }
  }
}