@import '../../../../../styles/core.scss';

.TutorialEditor {
  &-Nav {
    background: #242e34;
    flex: 0 0 60px;
    padding-left: 10px;
    padding-right: 20px;

    &-Tab {
      opacity: 0.5;

      &_active,
      &:hover,
      &:active,
      &:focus {
        opacity: 1;
      }
    }

    &-Plus {
      margin-left: 0;
    }

    &-Menu {
      padding: 0;

      &-Method {
        flex: 0 0 auto;
      }
    }

    &-Button {
      max-width: 275px;

      &-Link-Icon {
        color: #fff;
        margin-left: 5px;
        transform: rotate(45deg);
      }
    }

    &-Button-Text,
    &-Menu-Text {
      margin-left: 5px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  &-Controls {
    background: #242e34;
    flex: 0 0 auto;
    padding: 5px;

    &-ControlWrapper {
      align-items: center;
      background: get(color 'slate');
      border-radius: 6px;
      color: get(color 'shale');
      display: inline-flex;
      font-size: 15px;
      font-family: inherit;
      height: 25px;
      margin: 5px;
      padding-left: 8px;
      padding-right: 5px;

      &_select {
        position: relative;

        &::after {
          bottom: auto;
          color: get(color 'shale');
          content: '▼';
          display: block;
          font-size: 9px;
          pointer-events: none;
          position: absolute;
          right: ms(-2);
          top: auto;
        }
      }

      &-Select,
      &-Input {
        background: transparent;
        border: 0;
        color: get(color 'ivory');
        font-size: inherit;
        margin-left: 5px;

        &:focus {
          outline: 0;
        }
      }

      &-Select {
        appearance: none;
        padding-right: 20px;
      }

      &-Input {
        width: 75px;

        &::placeholder {
          color: get(color 'graphite');
        }
      }

      // tooltips
      &-Tooltip {
        align-items: center;
        background: get(color 'shale');
        border-radius: 15px;
        color: #fff;
        display: flex;
        font-size: 7px;
        height: 15px;
        justify-content: center;
        text-align: center;
        width: 15px;

        &::after {
          font-family: "proxima-nova", sans-serif;
        }
      }
    }

    &-Delete {
      background: none;
      border: 0;
      color: get(color 'red');
      cursor: pointer;
      font-family: inherit;
      font-size: 15px;
      margin: 5px;
      white-space: nowrap;

      &:focus {
        outline: 0;
        text-decoration: underline;
      }

      &:disabled {
        color: rgba(get(color 'red'), 0.5);
        cursor: not-allowed;
      }
    }
  }
}
