@use '../../assets/styles/fonts';

.ff-tabs-container {
  box-sizing: border-box;

  .ff-tab-row {
    flex: 0 1 auto;
    &--default {
      display: flex;
      gap: 8px;
      border-radius: 8px 8px 0 0;
      padding: 6px 8px 0;

      .ff-tab-button {
        &--default {
          position: relative;
          border: none;
          background: none;
          padding: 0 8px;
          display: flex;
          flex-direction: column;
          gap: 4px;
          cursor: pointer;

          .label-count-section {
            display: flex;
            align-items: center;
            .tab-icon {
              margin-right: 6px;
              display: flex;
              align-items: center;

              img {
                width: 16px;
                height: 16px;
              }
            }
            .tab-count {
              background-color: var(--input-default-label-color);
              color: var(--tab-bg-color);
              height: 12px;
              border-radius: 4px;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 8px;
              font-weight: 600;
              padding: 0 2px;

              &--active {
                background-color: var(--tabs-label-active-color);
              }
            }
          }

          .ff-tab-bar {
            width: 100%;
            border-radius: 2px 2px 0 0;
            border-color: var(--input-default-label-color);

            &--active {
              border-top: 2px solid var(--tabs-label-active-color);
            }
            &--success {
              border-top: 2px solid var(--confirm-tick-icon-color);
            }
          }
          .ff-tab-label {
            &--success {
              color: var(--confirm-tick-icon-color) !important;
            }
          }

          &:hover {
            .ff-tab-bar {
              border-top: 2px solid var(--input-hover-border-color);

              &--active {
                border-top: 2px solid var(--tabs-label-active-color);
              }
              &--error {
                border-top: 2px solid var(--delete-text-color);
              }
              &--success {
                border-top: 2px solid var(--confirm-tick-icon-color);
              }
            }

            .ff-tab-label {
              color: var(--input-hover-border-color) !important;

              &--active {
                color: var(--tabs-label-active-color) !important;
              }
              &--error {
                color: var(--delete-text-color) !important;
              }
              &--success {
                color: var(--confirm-tick-icon-color);
              }
            }

            .tab-count {
              background-color: var(--input-hover-border-color);

              &--active {
                background-color: var(--tabs-label-active-color);
              }
            }
          }

          &.disabled {
            opacity: 0.5;
            cursor: not-allowed;
          }
        }
      }
    }

    &--capsule {
      display: flex;
      gap: 8px;
      border: 1px solid var(--tabs-border-color);
      border-radius: 8px;
      padding: 3px 4px;
      background-color: var(--tabs-bg-color);

      .ff-tab-button {
        &--capsule {
          background: transparent;
          border: none;
          padding: 3px 4px;
          border-radius: 4px;
          cursor: pointer;

          &:hover {
            .ff-tab-label {
              color: var(--input-hover-border-color) !important;

              &--active {
                color: var(--tabs-label-active-color) !important;
              }
            }
          }

          &.active {
            background-color: var(--tab-bg-color);
          }

          .ff-tab-bar {
            display: none;
          }
        }
      }
    }

    &--no-border {
      border: none;
    }
    &--website {
      display: flex;
      border-radius: 8px 8px 0 0;
      gap: 0;
      padding: 0;

      .ff-tab-button {
        &--website {
          position: relative;
          border: none;
          background: none;
          padding: 0 8px;
          display: flex;
          flex-direction: column;
          gap: 4px;
          cursor: pointer;

          .label-count-section {
            display: flex;
            align-items: center;
            .tab-icon {
              margin-right: 6px;
              display: flex;
              align-items: center;

              img {
                width: 16px;
                height: 16px;
              }
            }
            .tab-count {
              background-color: var(--input-default-label-color);
              color: var(--tab-bg-color);
              height: 12px;
              border-radius: 4px;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 8px;
              font-weight: 600;
              padding: 0 2px;

              &--active {
                background-color: var(--tabs-label-active-color);
              }
            }
          }

          .ff-tab-bar {
            width: 100%;
            border-radius: 2px 2px 0 0;
            border-color: var(--input-default-label-color);

            &--active {
              border-top: 2px solid var(--tabs-label-active-color);
            }
            &--success {
              border-top: 2px solid var(--confirm-tick-icon-color);
            }
          }
          .ff-tab-label {
            color: var(--tab-default-color);
            font-weight: 600;
            font-size: 12px;

            &--success {
              color: var(--confirm-tick-icon-color) !important;
            }
            &--active {
              color: var(--tab-active-color);
            }

            &--error {
              color: var(--tab-error-color);
            }
          }

          .label-count-section {
            .tab-icon {
              margin-right: 6px;
              display: flex;
              align-items: center;

              img {
                width: 16px;
                height: 16px;
              }
            }
            .tab-count {
              &--active {
                background-color: var(--tab-active-color);
              }
            }
          }

          .ff-tab-bar {
            &--active {
              border-top: none;
            }
          }

          &:hover {
            .ff-tab-bar {
              border-top: none;
            }

            .ff-tab-label {
              color: var(--tab-hover-color);

              &--active {
                color: var(--tab-active-color);
              }
              &--error {
                color: var(--tab-error-hover-color);
              }
            }

            .tab-count {
              &--active {
                background-color: var(--tab-active-color);
              }
            }
          }

          &.disabled {
            opacity: 0.5;
            cursor: not-allowed;
          }
        }
      }
    }

    &--no-padding {
      border-radius: 8px;
      background: white;
      padding: 0px;
      justify-content: flex-start;
      margin-right: 8px;

      .ff-tab-button {
        &--capsule {
          background: transparent;
          border: none;
          padding: 3px 4px;
          border-radius: 7px;
          cursor: pointer;

          &:hover {
            .ff-tab-label {
              color: var(--input-hover-border-color) !important;

              &--active {
                color: var(--tabs-label-active-color) !important;
              }
            }
          }

          &.active {
            background-color: var(--slider-table-color);
          }

          .ff-tab-bar {
            display: none;
          }
        }
      }
    }
  }
  .ff-tab-content {
    width: inherit;
  }

  .ff-defaultStatus {
    position: absolute;
    top: 2px;
    right: 0px;
    width: 6px;
    height: 6px;
    background-color: transparent;
    border-radius: 50%;

    &.ff-successStatus {
      background-color: var(--confirm-tick-icon-color);
      box-shadow: 0px 1px 1px 0px var(--toggle-strip-shadow);
    }

    &.ff-dangerStatus {
      background-color: var(--delete-text-color);
      box-shadow: 0px 1px 1px 0px var(--toggle-strip-shadow);
    }
  }

  .ff-tab-button {
    &--default {
      &.has-error {
        .ff-tab-label {
          color: #c50303;
        }

        .ff-tab-bar {
          &--active {
            border-top: 2px solid #c50303;
          }
        }

        &:hover {
          .ff-tab-label {
            color: #c50303;
          }

          .ff-tab-bar {
            border-top: 2px solid #c50303;
          }
        }
      }
    }
    &--website {
      &.has-error {
        .ff-tab-label {
          color: var(--tab-error-color);
        }

        .ff-tab-bar {
          &--active {
            border-top: none !important;
            color: var(--tab-error-color);
          }
          &:hover {
            .ff-tab-label {
              color: var(--tab-error-hover-color);
            }
          }
        }
      }
    }
  }

  .tab-icon-error {
    margin-right: 6px;
    display: flex;
    align-items: center;
  }

  .tab-count--error {
    background-color: #c50303 !important;
    color: white !important;
  }
}

.ff-tab-button--website {
  position: relative;
  padding-top: 20px;
}

.ff-tab-remove-icon {
  position: absolute;
  top: -8px;
  right: -6px;
  cursor: pointer;
  display: none;
  z-index: 1;

  .ff-tab-remove-icon-error--default {
    svg path {
      fill: #c50303;
    }
  }

  .ff-tab-remove-icon-error--website {
    svg path {
      fill: var(--tab-error-color);
    }
  }
}

.ff-tab-button--website:hover .ff-tab-remove-icon {
  display: block;
}
.ff-tab-button--default:hover .ff-tab-remove-icon {
  display: block;
}

.ff-tab-remove-icon img {
  width: 10px;
  height: 10px;
  opacity: 0.8;
  transition: opacity 0.2s ease-in-out;
}

.ff-tab-remove-icon img:hover {
  opacity: 1;
}
.ff-tab-with-separator {
  display: flex;
  align-items: center;

  .ff-tab-separator {
    width: 1px;
    height: 20px;
    background-color: #808080;
    margin: 0 4px;
  }
}