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

.TutorialCard {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 6px;
  color: get('color' slate);
  display: inline-flex;
  flex-direction: column;
  line-height: 1.5;
  max-width: 360px;
  min-width: 240px;
  position: relative;

  &_unpublished {
    background: #f8f8f8;

    .TutorialCard-Avatar,
    .TutorialCard-Title,
    .TutorialCard-Description,
    .TutorialCard-Steps,
    .TutorialCard-Button {
      opacity: 0.75;
    }
  }

  &-Status {
    align-items: center;
    background: get('color' slate);
    border-radius: 25px;
    color: #fff;
    display: flex;
    font-size: 12px;
    font-weight: 600;
    height: 25px;
    right: 10px;
    padding: 0 8px;
    position: absolute;
    top: 10px;

    &_featured {
      background: get(color 'yellow');
      color: darken(get(color 'yellow'), 40%);
    }

    &-Icon {
      margin-right: 3px;
    }
  }

  &-Top {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 20px;

    + .TutorialCard-Toolbar {
      box-shadow: inset 0 1px 0 #f0f0f0;
    }
  }

  &-Avatar {
    margin-bottom: 15px;
  }

  &-Title {
    font-size: 16px;
    font-weight: 600;
  }

  &-Description {
    font-size: 14px;
    margin-right: 40px;
    margin-top: 5px;
    word-break: break-word;
  }

  &-Steps {
    color: get('color' shale);
    flex: 1 1 auto;
    font-size: 14px;
    margin-top: 10px;
  }

  &-Button {
    background: var(--recipe-button-color, get(color 'blue'));
    margin-top: 15px;

    &:hover {
      background: var(--recipe-button-color-hover, #027ff1);
    }

    &:active {
      background: var(--recipe-button-color-active, #0271d6);
    }

    &:focus {
      box-shadow: 0 0 0 3px var(--recipe-button-color-focus, rgba(17, 140, 253, 0.25));
    }

    &:disabled {
      background: var(--recipe-button-color-disabled, #70bafe);
    }
  }

  &-Toolbar {
    align-items: center;
    background: #f8f8f8;
    border-radius: 0 0 6px 6px;
    display: flex;
    justify-content: center;

    &-Wrapper {
      overflow-x: auto;
      white-space: nowrap;
    }

    &-Button,
    &-Arrow {
      align-items: center;
      background: none;
      border: 0;
      color: get('color' graphite);
      cursor: pointer;
      display: inline-flex;
      font-family: inherit;
      font-weight: 600;
      height: 39px;
      min-width: min-content;
      padding: 0 8px;
      position: relative;
      white-space: nowrap;

      &:focus {
        outline: none;
      }

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

      + .TutorialCard-Toolbar-Button {
        margin-left: 4px;

        &::before {
          background: #c4c4c4;
          border-radius: 4px;
          content: '';
          display: block;
          height: 4px;
          left: -4px;
          position: absolute;
          width: 4px;
        }
      }
    }

    &-Button {
      font-size: 13px;
      text-decoration: underline;

      &:not(:disabled):hover,
      &:not(:disabled):active,
      &:not(:disabled):focus {
        text-decoration: none;
      }

      &_red {
        color: #e95f6a;

        &:disabled {
          color: rgba(#e95f6a, 0.5);
        }
      }
    }

    &-Arrow {
      font-size: 11px;
      opacity: 0.9;
      text-decoration: none;

      &:not(:disabled):hover,
      &:not(:disabled):active,
      &:not(:disabled):focus {
        opacity: 1;
      }
    }
  }
}