@use 'variables' as *;
@use 'colors' as *;
@use 'buttons' as *;
@use 'containers' as *;
@use 'fonts' as *;
@use 'icons' as *;
@use 'inputs' as *;
@use 'logo' as *;
@use 'selectbox' as *;
@use 'sass:map';
@use 'element-plus/mixins/button' as *;

// @use 'layers' as *;

// variables.scss dosyasını forward edelim, böylece diğer dosyalar da kullanabilir

@forward 'variables';

html,
body,
#main {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  height: 100vh;
}

body {
  background-color: #ffffff;
  font-family: var(--font-family);
}

.page-footer {
  align-items: center;
  display: flex;
  gap: 28px;
  justify-content: center;
  margin-top: 16px;

  .el-button {
    flex-basis: 100%;
    justify-content: center;

    &:first-of-type {
      @include button-variant('secondary');
    }
  }
}

.el-icon {
  &.more-icon {
    align-items: center;
    color: var(--el-color-neutral-light-3);
    display: flex;
    height: 20px;
    justify-content: center;
    width: 20px;

    svg {
      height: 20px;
      width: 20px;
    }
  }
}

.el-table {
  + .el-pagination {
    margin-top: 16px;
  }
}