@import "clay";

.component-color {

  .section & {
    padding: 0;
  }

  .value {
    width: $small-component-width;
    height: $base-height;
    border-radius: $base-height / 2;
    box-shadow: $box-shadow-small-components;
    display: block;
    background: #000;
  }

  .picker-wrap {
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    position: fixed;
    padding: $item-spacing-v $item-spacing-h /2;
    background: rgba(0, 0, 0, 0.65);
    opacity: 0;
    transition: opacity 100ms ease-in 175ms;
    pointer-events: none;
    z-index: 100;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .picker {
      padding: $item-spacing-v $item-spacing-h;
      background: $color-gray-4;
      box-shadow: $box-shadow-large-components;
      border-radius: $border-radius;
      width: 100%;
      max-width: 26rem;
      overflow: auto;
    }

    &.show {
      transition-delay: 0ms;
      pointer-events: auto;
      opacity: 1;
    }
  }

  .color-box-wrap {
    box-sizing: border-box;
    position: relative;
    height: 0;
    width: 100%;
    padding: 0 0 100% 0; // overridden with inline style

    .color-box-container {
      position: absolute;
      height: 99.97%;
      width: 100%;
      left: 0;
      top: 0;

      .color-box {
        float:left;
        cursor: pointer;
        -webkit-tap-highlight-color: rgba(0,0,0,0);

        &.rounded-tl {
          border-top-left-radius: $border-radius;
        }

        &.rounded-tr {
          border-top-right-radius: $border-radius;
        }

        &.rounded-bl {
          border-bottom-left-radius: $border-radius;
        }

        &.rounded-br {
          border-bottom-right-radius: $border-radius;
        }

        &.selected {
          transform: scale(1.1);
          border-radius: $border-radius;
          box-shadow: #111 0 0 0.24rem;
          position: relative;
          z-index: 100;
        }
      }

    }
  }
}