@import 'variables';
@import 'theme-colors';

.card {
  border: 0;
  box-shadow: var(--default-box-shadow);
  background-color: var(--default-card-bg);

  .card-header, .card-footer {
    background-color: transparent;
    padding: $default-padding-margin;
    border-color: var(--default-border-color);

    .card-title {
      margin-bottom: 0;
      font-weight: normal;
    }

    .card-toolbar {
      padding: 0;
      margin: 0;
      display: flex;
      list-style-type: none;

      .toolbar-item {
        .toolbar-link {
          padding: 0.5rem 0.75rem;
          color: $secondary-color;
          border-radius: $default-radius;

          .toolbar-icon {
            width: 16px;
            height: 16px;
          }

          &:hover {
            color: $brand-color;
            background-color: var(--base-color);
          }
        }
      }
    }
  }

  .card-body {
    text-align: start;
    padding: $default-padding-margin;
  }

  &.card-tabbed {
    .card-header {
      padding: 0;

      .nav-tabs {
        border: 0;
        height: 100%;
        padding-right: 1rem;

        .nav-item {
          height: inherit;

          .nav-link {
            color: $secondary-color;
            height: inherit;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 0;
            margin-bottom: 0;
            border: 0;
            border-bottom: 3px solid transparent;
            transition: all $default-transition-duration ease-in-out;

            &:hover {
              color: $brand-color;
            }

            &.active {
              color: $brand-color;
              border-color: $brand-color;
              background-color: transparent;
            }
          }
        }
      }
    }
  }

  &.card-pilled {
    .card-header {
      padding: 0;

      .nav-pills {
        padding-right: 1rem;

        .nav-item {
          .nav-link {
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all $default-transition-duration ease-in-out;
          }
        }
      }
    }
  }
}

// SCSS for RTL Layout
[dir="rtl"] {
  .card {
    &.card-tabbed {
      .card-header {
        .nav-tabs {
          padding-right: 0;
          padding-left: 1rem;
        }
      }
    }

    &.card-pilled {
      .card-header {
        .nav-pills {
          padding-right: 0;
          padding-left: 1rem;
        }
      }
    }
  }
}
