@import "../lib.less";

.@{veui-prefix}-schedule {
  width: 653px;
  border: 1px solid @veui-color-gray-5;
  outline: none;
  border-radius: @veui-border-radius-s;

  &-header {
    overflow: hidden;
    padding: 10px 20px;
    font-size: @veui-font-size-s;
    line-height: 24px;
    border-bottom: 1px solid @veui-color-gray-5;
  }

  &-shortcuts {
    float: left;
  }

  &-shortcut {
    height: 24px;
    margin-left: 10px;
    padding: 0 10px;
    border: none;
    background-color: transparent;
    color: @veui-font-color-normal;
    outline: none;
    .veui-button-transition();

    &:first-child {
      margin-left: -10px;
    }

    &-selected {
      background-color: @veui-color-gray-7;
      color: @veui-font-color-normal;
    }
  }

  &-legend {
    float: right;

    &-item {
      margin-left: 20px;
      color: @veui-font-color-normal;

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

      &::before {
        content: "";
        display: inline-block;
        margin-right: 8px;
        .size(8px);
      }
    }

    &-available::before {
      border: 1px solid @veui-color-gray-5;
      background-color: #fff;
    }

    &-selected::before {
      background-color: @veui-color-brand-8;
    }
  }

  &-body {
    .clearfix();
    padding: 20px 10px 20px 20px;
    background-color: @veui-color-gray-8;
  }

  &-head {
    &-hour {
      float: right;
      color: @veui-font-color-normal;
      margin-bottom: 10px;
      font-size: @veui-font-size-s;

      &-item {
        float: left;
        .size(46px, 12px);
        text-align: center;
      }
    }

    &-day {
      float: left;
      clear: right;
      margin-right: 10px;
      color: @veui-font-color-normal;

      &-item {
        line-height: 23px;

        .@{veui-prefix}-checkbox[ui~="small"] {
          .@{veui-prefix}-checkbox {
            &-box {
              margin-right: 10px;
            }

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

        .@{veui-prefix}-checkbox-label {
          width: 1em;
          text-align: center;
        }
      }
    }
  }

  &-detail {
    position: relative;
    float: left;
  }

  &-table {
    table-layout: fixed;
    border-collapse: collapse;
    cursor: pointer;

    col {
      width: 23px;
    }

    td {
      height: 23px;
      padding: 0;
      text-align: center;
    }

    &-interaction {
      button {
        .absolute(0, _, _, 0);
        .size(22px);
        border: none;
        background-color: currentColor;
        color: #fff;
        outline: none;
        .veui-button-transition();

        &:hover,
        &.focus-visible {
          color: @veui-color-brand-9;
        }

        &.focus-visible {
          .veui-focus-shadow();
          z-index: 1;
        }

        &:hover:active,
        &.@{veui-prefix}-schedule-selected {
          color: @veui-color-brand-8;
        }

        &.@{veui-prefix}-schedule-selected {
          &:hover,
          &.focus-visible {
            color: @veui-color-brand-7;
          }

          &:hover:active {
            color: @veui-color-brand-6;
          }
        }

        &::after {
          // for browsers lacking `pointer-events` support
          content: "";
          .absolute(0, _, _, 0);
          width: 23px;
          height: 23px;
          z-index: 1;
          background-color: #fff;
          opacity: 0.001;
        }
      }

      td {
        position: relative;
        border: 1px solid @veui-color-gray-6;

        &.@{veui-prefix}-schedule-selected
          + .@{veui-prefix}-schedule-selected
          button::before {
          content: "";
          .absolute(0, _, _, -1px);
          .size(1px, 22px);
          background-color: currentColor;
        }
      }
    }

    &-selected {
      pointer-events: none; // for Firefox
      .absolute(0, _, _, 0);
      font-size: @veui-font-size-s;
      color: @veui-font-color-normal;

      td {
        padding-top: 1px;
        border-color: transparent;
        white-space: nowrap;
      }
    }
  }
}