.atom-picker {
  $z-index: 10000;

  display: flex;
  flex-direction: column;
  box-shadow: $shadow-style-front color("shadow");
  background: color('background');
  position: fixed;
  z-index: $z-index;
  top: auto;
  bottom: spacing(-2);
  right: spacing(-2);

  &__color {
    display: flex;
    &__item {
      background-color: color('theme');
      appearance: none;
      border: none;
      flex: 1 1 spacing(0);
      height: spacing(1);

      &:focus {
        z-index: $z-index + 1;
      }
    }
  }

  &__scale {
    display: flex;
    flex-direction: row;

    &__item {
      color: color('foreground-secondary');
      appearance: none;
      border: none;
      height: spacing(1);
      flex: 1 0 auto;
      padding: 0 spacing(-3);

      &:focus {
        z-index: $z-index + 1;
      }

      @include icon-style;

      &__default {
        @include set-icon("viewport-default", $include-pseudo: "before");

        body.view--default &::before {
          font-weight: $font-weight-icon-solid;
        }
      }

      &__medium {
        @include set-icon("viewport-medium", $include-pseudo: "before");

        body.view--medium &::before {
          font-weight: $font-weight-icon-solid;
        }
      }

      &__wide {
        @include set-icon("viewport-wide", $include-pseudo: "before");

        body.view--wide &::before {
          font-weight: $font-weight-icon-solid;
        }
      }

      &__position-toggle {
        @include set-icon("collapse", $include-pseudo: "before");
      }

      &__theme-style {
        @include set-icon("dark-mode", $include-pseudo: "before");
        //solid icon not aligned properly, so we need to set a fixed width
        width: spacing(-3, $times: 2, $add: .9em);;

        body.theme--dark:not(.body--scrollbar-dark) &::before {
          font-weight: $font-weight-icon-solid;
        }
      }

      &__reset {
        text-transform: uppercase;
        @include set-font(-1, "single");
      }
    }
  }

  &--at-top {
    top: spacing(-2);
    bottom: auto;

    & .atom-picker__scale__item__position-toggle {
      @include set-icon("expand", $include-pseudo: "before");
    }
  }
}